<html>
<meta charset="utf-8">

<head>
    <link rel="stylesheet" type="text/css" href="mySheet.css">
    <script src="jquery-3.2.1.min.js"></script>
    <style>
        ul.a {
            list-style-type: square;
        }

        ul.b {
            list-style-type: circle;
        }

        ol.c {
            list-style-type: upper-roman;
        }

        ol.d {
            list-style-type: upper-alpha;
        }

        ul.img {
            list-style-image: url('img/liststyle.png');
        }
    </style>
</head>
<div>
    <h3>html有两种列表</h3>
    <ul>
        <li>无序列表 - 列表项标记用特殊图形（如小黑点、小方框等）</li>
        <li>有序列表 - 列表项的标记有数字或字母</li>
        <li>头部序号设置list-style-type</li>
        <li>头部序号设置list-style简写顺序 list-style-type->list-style-postion->list-style-image</li>
    </ul>
    <ul class="a">
        <li>使用无需列表方块1</li>
        <li>使用无需列表方块2</li>
    </ul>
    <ul class="b">
        <li>使用无需列表圆圈1</li>
        <li>使用无需列表圆圈2</li>
    </ul>
    <ol class="c">
        <li>使用有序列表罗马数字1</li>
        <li>使用有序列表罗马数字2</li>
    </ol>
    <ol class="d">
        <li>使用有序列表字母1</li>
        <li>使用有序列表字母2</li>
    </ol>
    <ul class="img">
        <li>图像列表头1</li>
        <li>图像列表头2</li>
    </ul>
</div>

</html>